<template>
  <div>
    <Header/>
    <div>
      <div style="font-size: 30px">推荐景点</div>
      <div class="scene">
        <div class="sceneItem" v-for="(val,index) in sceneData.records" :key="index">
          <Img class="sceneImg" :imgSrc="val.smallImg"
               :contentTitle="val.name"
               :contentContent="val.recommend"
               :id="val.sceneId"
               :isSave="val.isSave"
               @saveClick="sceneSaveClick"
               :border="true"
          />
        </div>
      </div>
      <div>
        <font style="margin-right: 20px">总条数：{{sceneData.total}}条</font>
        <font style="margin-right: 20px">每页数量：{{sceneData.size}}条</font>
        <font style="margin-right: 20px">当前页面：第{{sceneData.current}}页</font>
        <button style="margin-right: 10px" v-show="sceneData.current>1" @click="beforePage">上一页</button>
        <button v-show="!sceneData.lastPage" @click="nextPage">下一页</button>
      </div>
      <div>
        <Bottom/>
      </div>
    </div>
  </div>
</template>

<script>
  import Header from '../components/common/header.vue'
  import Bottom from '../components/common/bottom.vue'
  import Img from '../components/common/img.vue'

  export default {
    name: "scene",
    components: {Header, Bottom, Img},
    created() {
      this.$axios({
        url: this.api.searchScene,
        params: {
          index: this.page,
          size: this.pageSize
        },
        method: 'get'
      }).then(res => {
        if (res.state === 0) {
          this.sceneData = res.data
        }
      })
    },
    data() {
      return {
        page: 1,
        pageSize: 12,
        sceneData: {},
      }
    },
    methods: {
      //收藏
      sceneSaveClick(id, isSave) {
        let post = {}
        post['sceneId'] = id
        if (isSave) {
          post['type'] = 2
        } else {
          post['type'] = 1
        }
        this.$axios({
          url: this.api.saveScene,
          params: post,
          method: 'post'
        }).then(res => {
          if (res.state !== 0) {
            for (let i of this.sceneData.records) {
              if (i.sceneId === id) {
                i.isSave = !isSave
                break
              }
            }
            alert(res.msg)
          } else {
            for (let i of this.sceneData.records) {
              if (i.sceneId === id) {
                i.isSave = !isSave
                break
              }
            }
          }
        })
      },
      //上一页
      beforePage() {
        this.page--
        this.$axios({
          url: this.api.searchScene,
          params: {
            index: this.page,
            size: this.pageSize
          },
          method: 'get'
        }).then(res => {
          if (res.state === 0) {
            this.sceneData = res.data
          }
        })
      },
      //下一页
      nextPage() {
        this.page++
        this.$axios({
          url: this.api.searchScene,
          params: {
            index: this.page,
            size: this.pageSize
          },
          method: 'get'
        }).then(res => {
          if (res.state === 0) {
            this.sceneData = res.data
          }
        })
      }
    }
  }
</script>

<style scoped>

  .scene {
    margin: 0 auto;
    width: 80%;
    height: auto;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: start;

  }

  .sceneItem {
    width: auto;
    height: 400px;

  }

  .sceneImg {
    width: auto;
    height: 200px;
    margin: 20px;
  }
</style>
